<template>
	<div class="w-full" :class="isRuning ? 'opacity-50' : ''">
		<div v-if="showBet">
			<div class="text-[#96A5AA] text-base h-[18px] leading-[18px]">
				{{ $t('miniGames.mines') }}
			</div>
			<div>
				<n-select
					class="select-style h-[40px] mt-2"
					v-model:value="value"
					:disabled="isDisabled"
					:options="options"
					:on-update:value="changeMines" />
			</div>
		</div>
		<div v-else class="andmine-gemstone">
			<div class="item">
				<div class="text-[#96A5AA] text-base h-[18px] leading-[18px]">
					{{ $t('miniGames.mines') }}
				</div>
				<div class="mt-2">
					<n-input
						size="large"
						class="h-[40px] mt-[4px] bg-[#3e4c68] input-style rounded-[4px]"
						v-model:value="value"
						readonly />
				</div>
			</div>
			<div class="item">
				<div class="text-[#96A5AA] text-base h-[18px] leading-[18px]">
					{{ $t('miniGames.gems') }}
				</div>
				<div class="mt-2">
					<n-input
						size="large"
						class="h-[40px] mt-[4px] bg-[#3e4c68] input-style rounded-[4px]"
						:value="String(25 - value)"
						readonly />
				</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { NSelect, NInput } from 'naive-ui'
import { ref } from 'vue'
import { minesOptions } from '@/views/games/config'

const options = minesOptions
const props = defineProps({
	isRuning: {
		type: Boolean,
		default: false
	},
	type: {
		type: String,
		default: ''
	},
	isDisabled: {
		type: Boolean,
		default: false
	},
	mines: {
		type: Number,
		default: 3
	},
	showBet: {
		type: Boolean,
		default: true
	}
})

const value = ref<any>(props.mines)

const emit = defineEmits(['changeMines'])
const changeMines = (val: number) => {
	value.value = val
	emit('changeMines', val)
}
</script>

<style lang="scss" scoped>
.select-style {
	box-shadow:
		0 1px 3px 0 rgba(0, 0, 0, 0.2),
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
	:deep(.n-base-selection) {
		height: 100% !important;
		.n-base-selection-label {
			height: 100% !important;
			background: #131a27;
			border: 2px solid #3e4c68;
		}
	}
}
.andmine-gemstone {
	display: flex;
	justify-content: space-between;

	.item {
		width: 49%;

		.input-style {
			box-shadow:
				0 1px 3px 0 rgba(0, 0, 0, 0.2),
				0 1px 2px 0 rgba(0, 0, 0, 0.12);
			:deep(.n-input__input > .n-input__input-el) {
				height: 100% !important;
			}
		}
	}
}
</style>
